<template>
  <div class="common-layout">
    <el-page-header>
      <template #breadcrumb>
        <!-- <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: './page-header.html' }"> homepage </el-breadcrumb-item>
            <el-breadcrumb-item><a href="./page-header.html">route 1</a></el-breadcrumb-item>
            <el-breadcrumb-item>route 2</el-breadcrumb-item>
          </el-breadcrumb> -->
      </template>
      <template #content>
        <div class="flex items-center">
          <el-avatar
            class="mr-3"
            :size="32"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
          <!-- <span class="text-large font-600 mr-3"> Title </span> -->
          <span class="text-sm mr-2" style="color: var(--el-text-color-regular)"> 个人主页</span>
          <el-icon><Message /></el-icon>
        </div>
      </template>
    </el-page-header>
  </div>
  <div class="h-6" />
  <el-menu
    :default-active="activeIndex2"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    @select="handleSelect"
  >
    <el-sub-menu index="1">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="3">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="4">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="5">
      <template #title>Workspace</template>
      <el-menu-item index="2-1">item one</el-menu-item>
      <el-menu-item index="2-2">item two</el-menu-item>
      <el-menu-item index="2-3">item three</el-menu-item>
    </el-sub-menu>
    <el-sub-menu>
      <template #extra>
        <div class="flex items-center">
          <el-button @click="gotoInbox">收件箱</el-button>
          <el-button type="primary" class="ml-2" @click="goToRequest">任务生成</el-button>
        </div>
      </template>
    </el-sub-menu>
  </el-menu>

  <el-empty description="description" />
</template>

<script>
import { ref } from 'vue'
import axios from 'axios'
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
const activeIndex2 = ref('1')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}

export default {
  setup() {
    const router = useRouter()

    const goToRequest = () => {
      router.push('/Request')
    }
    const gotoInbox = () => {
      router.push('/Inbox')
    }
    //const isClick=false;
    const state = reactive({
      tasks: []
    })

    //     const fetchTasks = async () => {
    //       const response = await axios.get(`user/function/checkReceiveTask?account=1`)//heckReceiveTask?account=${props.account}
    //       console.log(response.data.code)
    //       state.tasks = response.data
    //     }
    // fetchTasks()

    return {
      goToRequest,
      ...toRefs(state),
      gotoInbox
    }
  }
}
</script>
